screen - "light" and "dark" mode - 1

code:
    <div id="frame">
      <div id="div1">
        <label for="lightdark">Light/Dark Mode:</label>
        <select id="lightdark">
            <option value="auto">Auto</option>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
    </div>
    <div id="div2">
        <label for="contrast">Contrast Mode:</label>
        <select id="contrast">
          <option value="auto">Auto</option>
          <option value="high">High</option>
          <option value="low">Low</option>
        </select>
    </div>
  </div>
  <style>
      #frame{display: grid; grid-template-columns: 1fr 1fr 1fr; place-content: left; min-height: 80%; 
        font-family: system-ui, sans-serif; position: relative; width: 40vw; height: 40vh; 
        gap: 1vw; padding: 1vw; border-radius: 0.75vw;  background-color: 
        color-mix(in srgb, rebeccapurple 40%, Canvas);}
      #frame div {display: flex; flex-flow: row nowrap; justify-content: flex-start; gap: 1vw; height: 4vh; width:20vw;}
      #frame:has(#lightdark option[value="light"]:checked) {color-scheme: light;}
      #frame:has(#lightdark option[value="dark"]:checked) {color-scheme: dark;}
      #frame:has(#contrast option[value="low"]:checked) {filter: contrast(35%); color: CanvasText; 
        background-color: Canvas;}
      #frame:has(#contrast option[value="high"]:checked) {filter: contrast(100%); background-color: Canvas; 
        color: Canvas;}
      
      @media (prefers-contrast: less) {
        #frame {filter: contrast(75%); color: CanvasText; background-color: Canvas; }
        #frame:has(#contrast option[value="high"]:checked) { filter: revert;}
      }
  </style>